/**
 * 用一个全局变量存储被注册的副作用函数
 */
let activeEffect;
/**
 * @description 原始数据
 */
const data = { text: "Hello, World!" };

/**
 * @description 存储副作用函数的桶
 */
const bucket = new Set();

/**
 * @description 代理对象
 */
const obj = new Proxy(data, {
  get(target, key) {
    if (activeEffect) {
      bucket.add(activeEffect);
    }
    return target[key];
  },
  set(target, key, newVal) {
    target[key] = newVal;
    bucket.forEach((f) => f());
  },
});

/**
 * @description 副作用函数
 */
const effect = (fn) => {
  activeEffect = fn;
  fn();
};

/**
 * @description 执行副作用函数，触发读取
 */
effect(() => {
  document.body.textContent = obj.text;
});

/**
 * @description 1 秒后修改响应式数据
 */
setTimeout(() => {
  obj.text = "微型响应系统";
}, 1000);
